<script setup lang="ts">
import {SmoothDndContainer01} from "@/components/SmoothDnd/01/SmoothDndContainer01";
import {SmoothDndDraggable01} from "@/components/SmoothDnd/01/SmoothDndDraggable01";
import {useSmoothDnd01a} from "@/stores/smoothDnd01";
import {storeToRefs} from "pinia";
import TextMaterial from "@/material/internal/TextMaterial.vue"
import ChartMaterial from "@/material/internal/ChartMaterial.vue"
import ImageMaterial from "@/material/internal/ImageMaterial.vue"
const smoothDndStore = useSmoothDnd01a();
const {items} = storeToRefs(smoothDndStore)
</script>

<template>
  <h2>注：左右两个区域的group-name的值需要相同</h2>
  <div class="demo01">
    <div class="left">
      <SmoothDndContainer01
          behaviour="copy"
          class="item-wrap"
          group-name="blocks"
          orientation="vertical"
          tag="div"
          :get-child-payload="(index:number)=>index+1"
      >
        <SmoothDndDraggable01>
          <TextMaterial></TextMaterial>
        </SmoothDndDraggable01>
        <SmoothDndDraggable01>
          <ChartMaterial></ChartMaterial>
        </SmoothDndDraggable01>
        <SmoothDndDraggable01>
          <ImageMaterial></ImageMaterial>
        </SmoothDndDraggable01>
      </SmoothDndContainer01>
    </div>
    <div class="right">
      <SmoothDndContainer01
          group-name="blocks"
          orientation="vertical"
          tag="div"
          @drop="item => {
            const newItems = smoothDndStore.applyDrag(items, item);
            return smoothDndStore.replaceAll(newItems);
          }"
      >
        <SmoothDndDraggable01 v-for="i in items" :key="i"  class="item">{{i}}</SmoothDndDraggable01>
      </SmoothDndContainer01>
    </div>
  </div>
</template>

<style scoped>
.demo01{
  display: flex;
}
.left, .right{
  flex:1;
}
.left{
  background: rgba(62, 175, 124, 0.5);
}
.right{
  background: rgba(0, 58, 140, 0.5);
}
.item-wrap{
  display: flex;
  padding:8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
}
.item{
  width:100px;
  height:30px;
  color:#fff;
  background: #3eaf7c;
  margin:8px;
  text-align: center;
}
.item-right{
  background: #3eaf7c;
  height:100px;
}
</style>
